﻿<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <script type="text/javascript" src="~/Scripts/PickerDateRange/jquery.min.js"></script>
	<script type="text/javascript" src="~/Scripts/PickerDateRange/dateRange.js"></script>
	<script type="text/javascript" src="~/Scripts/PickerDateRange/monthPicker.js"></script>
    <script type="text/javascript" src="~/Scripts/PickerDateRange/dateFunction.js"></script>
	<link rel="stylesheet" type="text/css" href="~/Scripts/PickerDateRange/dateRange.css"/>
	<link rel="stylesheet" type="text/css" href="~/Scripts/PickerDateRange/monthPicker.css"/>
	<style type="text/css">
		::selection {
			background-color: #E13300;
			color: white;
		}
		::moz-selection {
			background-color: #E13300;
			color: white;
		}
		::webkit-selection {
			background-color: #E13300;
			color: white;
		}
		body {
			background-color: #fff;
			margin: 40px;
			font: 12px     /20px normal Helvetica, Arial, sans-serif;
			color: #4F5155;
		}
		a {
			color: #003399;
			background-color: transparent;
			font-weight: normal;
		}
		input {
			color: #333333;
			font: 12px /1.5 Tahoma, Helvetica, 'SimSun', sans-serif;
		}
		code {
			font-family: Consolas, Monaco, Courier New, Courier, monospace;
			font-size: 12px;
			background-color: #f9f9f9;
			border: 1px solid #D0D0D0;
			color: #002166;
			display: block;
			margin: 14px 0 14px 0;
			padding: 12px 10px 12px 10px;
		}
		h1 {
			color: #444;
			background-color: transparent;
			border-bottom: 1px solid #D0D0D0;
			font-size: 19px;
			font-weight: normal;
			margin: 0 0 14px 0;
			padding: 14px 15px 10px 15px;
		}
		.wrapper {
			margin: 5px 1px 10px 1px;
            height: 24px;
		}			
	</style>
</head>
 <div class="wrapper">
	<div class="ta_date" id="div_date_demo3">
        <span class="date_title" id="date_demo3"></span>
        <a class="opt_sel" id="input_trigger_demo3" href="#">
            <i class="i_orderd"></i>
        </a>
    </div>
    <div id="datePicker"></div>
    <input class="mini-datepicker" id="FDateTime1" name="FDateTime1" format="yyyy-MM-dd HH:mm:ss" style="width:0px;"/>
    <input class="mini-datepicker" id="FDateTime2" name="FDateTime2" format="yyyy-MM-dd HH:mm:ss" style="width:0px;"/>
    <script type="text/javascript">
        var myDate = new Date();
        var myFormatDt = dateToStr(myDate, 3);
        var dateRange = new pickerDateRange('date_demo3', {
            aRecent7Days: 'aRecent7DaysDemo3', //最近7天
            isTodayValid: true,
            defaultText: ' 至 ',
            startDate: myFormatDt,
            endDate: myFormatDt,
            inputTrigger: 'input_trigger_demo3',
            theme: 'ta',
            success: function (obj) {
                var mStartDate = obj.startDate + " 00:00:01";
                var days = DateDiff(obj.startDate, obj.endDate);
                if (days > 60) {
                    mini.get("FDate1").setValue(obj.startDate);
                    alert("选择的时间段不能大60天。");
                }
                else {
                    mStartDate = obj.endDate + " 00:00:01";
                }
                var mEndDate = obj.endDate + " 23:59:59";
                mini.get("FDateTime1").setValue(mStartDate);
                mini.get("FDateTime2").setValue(mEndDate);
                
                //$("#dCon_demo3").html('开始时间 : ' + obj.startDate + '<br/>结束时间 : ' + obj.endDate);
            }
        });
    </script>
</div>
